import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'
// import { PC_DEVICE_WIDTH } from '@/constants'

/**
 * 基于vueuse的useWindowSize
 * @returns {Object} { width, height }
 */
const { width } = useWindowSize()

/**
 * 判断是否是移动端
 * @returns {boolean}
 */
export const isMobileTerminal = computed(() => {
  // return width.value < PC_DEVICE_WIDTH
  // 正式业务使用以下方式判断
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
})

/**
 * 动态指定rem基准值，最大为40px
 * 根据用户的屏幕宽度，进行一些计算，把计算出来的值赋值给html根标签作为font-size大小
 * @returns {boolean}
 */
export const useREM = () => {
  const MAX_FONT_SIZE = 40
  // 监听html文档被解析完成的事件
  document.addEventListener('DOMContentLoaded', () => {
    const html = document.querySelector('html')
    const fontSize = window.innerWidth / 10
    html.style.fontSize =
      fontSize > MAX_FONT_SIZE ? `${MAX_FONT_SIZE}px` : `${fontSize}px`
  })
}
